import {Badge, Button, Col, Image, Menu, Modal, Row, Select, Typography} from 'antd';
import {useEffect, useState} from "react";
import {
  addNickname,
  classificationImages,
  deleClassification,
  editName,
  goodsImages, modifyClassification, picturesMoving
} from "@/services/ant-design-pro/marketing";
import Search from "antd/es/input/Search";
import './index.less';
import {TableDropdown} from "@ant-design/pro-table";
import ClassificationEditing from "@/components/CommodityMap/components/ClassificationEditing";

import UploadPictures from "@/components/CommodityMap/components/UploadPictures";

const {Paragraph} = Typography;


const CommodityMap = (props) => {
  const {isModalGoodImages, goodImagesCancel, title,imageUrl,setModalGoodsImages} = props
  //  定义点击显示边框的className
  const [borderDisplay, setBorderDisplay] = useState([])
  //  定义所有分类的数组
  const [cation, setCation] = useState([])
  //  定义分类下所有图片的数组
  const [cationImage, setCationImage] = useState([])
  //  定义添加modal框的状态
  const [isModalAdd,setIsModalAdd] = useState(false)
  //  定义分类编辑时的默认值
  const [initialId,setInitialId] = useState('')
  //  定义选中图片的id
  const [imageId,setImageId] = useState([])
  //  定义添加或编辑modal 的名称
  const [titleName,setTitleName] = useState('')



  const submit = async (values) => {
    if (initialId != ''){
      await modifyClassification(initialId,{
        nickname: values.nickname
      })

    }else {
      await addNickname({
        nickname: values.nickname
      })
      setIsModalAdd(false)
      let data = [...cation,{
        nickname: values.nickname
      }]
      setCation(data)
    }
  }


  // 在页面加载之前执行生命周期
  useEffect(async () => {
    //  请求分类的 API
    const classification = await goodsImages()
    setCation(classification.reverse())
    //  请求分类下图片的  API
    const classCationImage = await classificationImages()
    setCationImage(classCationImage.data)
  }, [])


  // @ts-ignore
  return (
    <Modal
      width={1000}
      title={title}
      visible={isModalGoodImages}
      footer={null}
      onCancel={goodImagesCancel}
    >
      <Row >
        <Col span={18} push={6}>
          <div style={{display: 'flex', justifyContent: 'space-around', width: '500px'}}>
            <Button
              type='primary'
              disabled={!borderDisplay.length}
              onClick={()=>{
                setModalGoodsImages(!isModalGoodImages)
              }}
            >使用选中图片</Button>
            <UploadPictures/>
            <Button danger={true} disabled={!borderDisplay.length}>删除图片</Button>
            <Select defaultValue="图片移动至" style={{width: 120}}
                    onSelect={async (value)=>{
                      await picturesMoving(value,{
                        attachment: imageId
                      })
                    }}>
              {
                cation.map(item => {
                  return (
                    <Select.Option

                      value={item.id}
                    >
                      {item.nickname}
                    </Select.Option>
                  )
                })
              }
            </Select>
          </div>
          <div className='goods'>
            {
              cationImage.map((item) => {

                // @ts-ignore
                return (
                  <div key={item.id}>
                    <Badge
                      count={borderDisplay.includes(item.id) ? borderDisplay.indexOf(item.id) + 1 : null}
                      size='default' offset={[-1, 10]}>
                      <Image
                        className={borderDisplay.includes(item.id) ? 'border' : null}
                        key={item.id}
                        onClick={() => {
                          // @ts-ignore
                          let cons = borderDisplay.indexOf(item.id)
                          // @ts-ignore
                          if (cons != '-1') {
                            borderDisplay.splice(cons, 1)
                            imageId.splice(cons,1)
                            imageUrl.splice(cons,1)
                          } else {
                            borderDisplay.push(item.id)
                            imageId.push(item.id)
                            imageUrl.push(item)
                          }
                          setBorderDisplay([...borderDisplay])
                          setImageId([...imageId])
                        }}
                        preview={false}
                        style={{width: '155px', height: '130px', marginTop: '10px', marginLeft: '10px', cursor: 'pointer'}}
                        src={item.att_dir}
                      />
                    </Badge>
                    <Paragraph
                      editable={{
                        onChange: async (value) => {
                          await editName(item.id,{
                            name: value
                          })
                          item.name= value
                          let data = [...cationImage]
                          setCationImage(data)
                        },
                      }}
                      ellipsis={{
                        expandable: false,
                        rows: 1,
                      }}
                      className='paragraph'
                    >
                      {item.name}
                    </Paragraph>
                  </div>

                )
              })
            }
          </div>
        </Col>
        <Col span={6} pull={18} style={{borderRight: '1px solid #CCCCCC'}}>
          <div style={{marginRight: '10px'}}>
            <Search placeholder="请输入分类名称" onSearch={(value,event)=>{}} enterButton/>
            <Menu className='menu'>
              <Menu.Item>
                全部图片
                <TableDropdown
                  style={{float: 'right'}}
                  onSelect={() => {
                    setTitleName('添加分类')
                    setIsModalAdd(true)
                  }}
                  menus={[
                    {key: 'addUp', name: '添加分类'},
                  ]}
                />
              </Menu.Item>
              {
                cation.map((item,index) => {
                  return (
                    <Menu.Item key={item.id}>
                      {item.nickname}
                      <TableDropdown
                        style={{float: 'right'}}
                        key="actionGroup"
                        onSelect={async (value) => {
                          if (value == 'addTo'){
                            setTitleName('添加分类')
                            setIsModalAdd(true)
                          }
                          if (value == 'copy'){
                            setInitialId(item.id)
                            setTitleName('编辑分类')
                            setIsModalAdd(true)
                          }
                          if (value == 'delete'){
                            await deleClassification(item.id)
                            let data = [...cation]
                            data.splice(index,1)
                            setCation(data)
                          }
                          // item.nickname= ''

                        }}
                        menus={[
                          {key: 'addTo', name: '添加分类'},
                          {key: 'copy', name: '编辑分类'},
                          {key: 'delete', name: '删除分类'},
                        ]}
                      />
                    </Menu.Item>
                  )
                })
              }
            </Menu>
          </div>
        </Col>
      </Row>
      {
        isModalAdd ? <ClassificationEditing
          titleName={titleName}
          isModalAdd={isModalAdd}
          cationEdit={submit}
          initialId={initialId}
          cationCancel={()=>{
            setIsModalAdd(false)
          }}
        /> : null
      }
    </Modal>
  );
};

export default CommodityMap;
